<!--  -->
<template>
  <el-table :data="adminTableData" border style="width: 100%">
    <el-table-column prop="id" label="编号" />
    <el-table-column prop="username" label="账号" />
    <el-table-column prop="nickName" label="姓名" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column label="创建时间">
      <template #default="{ row }">
        <!-- scope.row 获取彪哥数据一行的对象 -->
        {{ formatData(row.createTime) }}
      </template>
    </el-table-column>
    <el-table-column label="最后登录">
      <template #default="{ row }">
        {{ formatData(row.loginTime) }}
      </template>
    </el-table-column>
    <el-table-column prop="status" label="是否启用">
      <template #default="{ row }">
        <el-switch v-model="row.status" :active-value="1" :inactive-value="0" />
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="{ row }">
        <!-- 根据返回权限列表是否包含'allocRole' -->
        <!-- 使用 v-if -->
        <!-- 方式一：store.getters.permissionMenus.indexOf('allocRole') > -1 -->
        <!-- 方式二：~store.getters.permissionMenus.indexOf('allocRole') > -->
        <!-- 方式三：store.getters.permissionMenus.includes('allocRole') > -->
        <!-- 使用 全局自定义指令  在main.js注册全局自定义指令 v-permission -->
        <el-button
          type="primary"
          v-permission="'allocRole'"
          text
          @click="changeShowAllRole(row.id)"
          >分配角色</el-button
        >
        <el-button
          type="primary"
          v-permission="'editUser'"
          text
          @click="changeShowEdUser(row)"
          >编辑</el-button
        >
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    v-model:currentPage="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5, 10, 20, 50]"
    :background="true"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />

  <!-- 分配角色  -->
  <allocRole
    :showAllRole="showAllRole"
    @hiddenRole="hiddenAllRole"
    :aid="adminId"
  />

  <!-- 展示编辑弹框 -->
  <editUser
    :showEdUser="showEdUser"
    :admin-data="adminData"
    @hidden="hiddenEdUser"
  />
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref, Ref } from "vue";
import { getAdminList } from "../../request/http";
import moment from "moment";
import editUser from "../ums/component/editUser.vue";
import allocRole from "../ums/component/allocRole.vue";
import { useStore } from "vuex";

// 按钮权限设置 分配角色 编辑的显示隐藏 根据后端返回的数据
const store = useStore();

// 分页组件
let currentPage = ref(1);
let pageSize = ref(5);
let total = ref(0);

function handleSizeChange(size: number) {
  fetchData("", currentPage.value, pageSize.value);
}
function handleCurrentChange(page: number) {
  fetchData("", currentPage.value, pageSize.value);
}

// 格式化时间  使用插件
function formatData(dataStr?: string) {
  if (!dataStr) return "";
  return moment(dataStr).format("YYYY-MM-DD HH:mm:ss");
}

// 发起请求获取数据
// 定义响应式数据列表
let adminTableData = ref([]);
async function fetchData(
  keyword: string = "",
  pageNum: number = 1,
  pageSize: number = 20
) {
  let res = await getAdminList({
    keyword,
    pageNum,
    pageSize,
  });
  if (res.code === 200) {
    // console.log(res);
    adminTableData.value = res.data.list;
    //总数 total
    total.value = res.data.total;
  }
}
fetchData();

// 点击编辑展示弹框
let showEdUser = ref(false);
let adminData = ref({}) as Ref<AdminDataObj>;
function changeShowEdUser(row: AdminDataObj) {
  showEdUser.value = true;
  adminData.value = row;
}
// 子传父  点击编辑角色子组件取消  隐藏弹框
function hiddenEdUser(flag?: string) {
  // 关闭弹框
  showEdUser.value = false;
  // 子组件点击确定 更新数据
  if (flag === "reloadTable") {
    fetchData("", currentPage.value, pageSize.value);
  }
}

// 点击分配角色
let adminId = ref(0);

let showAllRole = ref(false);
function changeShowAllRole(aid: number) {
  showAllRole.value = true;
  adminId.value = aid;
}
// 子传父  点击分配角色子组件取消  隐藏弹框
function hiddenAllRole(flag?: string) {
  showAllRole.value = false;
  if (flag === "reloadRoles") {
    fetchData("", currentPage.value, pageSize.value);
  }
}
</script>
<style lang="less" scoped></style>
